<template>
  <a-spin :spinning="confirmLoading">
    <!-- 子表单区域 -->
    <br />
    <j-vxe-table
      keep-source
      :ref="tslProMaterialBatchDetailTable"
      :loading="tslProMaterialBatchDetailTable.loading"
      :columns="tslProMaterialBatchDetailTable.columns"
      :dataSource="tslProMaterialBatchDetailTable.dataSource"
      :maxHeight="300"
      :rowNumber="true"
      :rowSelection="false"
      :toolbar="false"
    />
    <a-pagination
      :current="tslProMaterialBatchDetailTable.ipagination.current"
      :page-size="tslProMaterialBatchDetailTable.ipagination.pageSize"
      :total="tslProMaterialBatchDetailTable.ipagination.total"
      :page-size-options="tslProMaterialBatchDetailTable.ipagination.pageSizeOptions"
      :show-total="showTotalFunc"
      show-quick-jumper
      show-size-changer
      @change="handlePageChange"
      @showSizeChange="handleShowSizeChange"
    />
  </a-spin>
</template>

<script>
import { getAction, postAction } from '@api/manage'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
import JFormContainer from '@/components/jeecg/JFormContainer'
import store from '@/store'
import { Pagination } from 'ant-design-vue'

export default {
  name: 'TslProMaterialBatchForm',
  mixins: [JVxeTableModelMixin],
  components: {
    JFormContainer,
    'a-pagination': Pagination,
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {},
      validatorRules: {},
      // 包材领料单子表
      tslProMaterialBatchDetailTable: {
        loading: false,
        dataSource: [],
        selectedRowKeys: [],
        selectionRows: [],
        loading: false,
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          //   showTotal: (total, range) => {
          //     return range[0] + '-' + range[1] + ' 共' + total + '条'
          //   },
          //   showQuickJumper: true,
          //   showSizeChanger: true,
          total: 0,
        },
        columns: [
          {
            title: '计划单号',
            key: 'planCode',
            type: JVXETypes.normal,
            width: '150px',
          },
          {
            title: '订单单号',
            key: 'orderCode',
            type: JVXETypes.normal,
            width: '150px',
          },
          {
            title: '客户物料编码',
            key: 'customCode',
            type: JVXETypes.normal,
            width: '140px',
            defaultValue: '',
          },
          {
            title: '物料编码',
            key: 'productCode',
            type: JVXETypes.normal,
            width: '140px',
            defaultValue: '',
          },
          {
            title: '物料名称',
            key: 'productBatchNo',
            type: JVXETypes.normal,
            minWidth: 300,
            defaultValue: '',
          },
          {
            title: '规格型号',
            key: 'materialSpec',
            type: JVXETypes.normal,
            width: '100px',
            defaultValue: '',
          },
          {
            title: '配方号',
            key: 'formulaNumber',
            dataIndex: 'formulaNumber',
            width: 100,
            disabled: true,
          },
          {
            title: '主单位',
            key: 'meUnit',
            dataIndex: 'meUnit',
            dictCode: 'ji_unit',
            type: JVXETypes.select,
            width: 100,
            disabled: true,
          },
          {
            title: '计划数量',
            key: 'planQuantity',
            dataIndex: 'planQuantity',
            defaultValue: '0',
            width: 120,
          },
          {
            title: '入库数量',
            key: 'completedQuantity',
            dataIndex: 'completedQuantity',
            defaultValue: '0',
            width: 120,
          },
          {
            title: '物料批号',
            key: 'materialBatchNumber',
            type: JVXETypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
          },
        ],
      },

      url: {
        update: '/pro/tslProTeamworkReport/updateBatch',
        list: '/pro/tslProTeamworkReport/queryBatchList',
      },
    }
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
    // 添加计算属性返回 showTotal 所需的函数
    showTotalFunc() {
      return (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`;
    }
  },
  created() {},
  methods: {
    add(rows) {
      this.loadData(rows)
    },
    loadData(ids) {
      const params = {
        ids: ids.join(","),
        pageNo: this.tslProMaterialBatchDetailTable.ipagination.current,
        pageSize: this.tslProMaterialBatchDetailTable.ipagination.pageSize,
      }
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.tslProMaterialBatchDetailTable.dataSource = res.result.records
          if (res.result.total) {
            this.tslProMaterialBatchDetailTable.ipagination.total = res.result.total
          } else {
            this.tslProMaterialBatchDetailTable.ipagination.total = 0
          }
        }
      })
    },
    // 处理分页变化事件
    handlePageChange(current, pageSize) {
      console.log('分页事件触发，当前页码:', current, '每页数量:', pageSize) // 添加调试信息
      this.tslProMaterialBatchDetailTable.ipagination.current = current
      this.tslProMaterialBatchDetailTable.ipagination.pageSize = pageSize
      this.loadData()
    },
    handleShowSizeChange(current, pageSize) {
      this.tslProMaterialBatchDetailTable.ipagination.current = current
      this.tslProMaterialBatchDetailTable.ipagination.pageSize = pageSize
      this.loadData()
    },
    async handleOk() {
      this.confirmLoading = true
      let model = {}
      model.tslProScheduleDetailList = this.tslProMaterialBatchDetailTable.dataSource
      try {
        await postAction(this.url.update, model)
        this.$message.success('提交成功')
        this.$emit('ok') // 触发提交成功事件，通知模态框
      } catch (error) {
        this.$message.error('提交失败：' + (error.message || '网络异常'))
      } finally {
        this.confirmLoading = false
      }
    },
  },
}
</script>

<style scoped>
::v-deep .vxe-table--body-wrapper {
  max-height: 100% !important;
}
::v-deep .ant-pagination {
  margin-top: 10px;
  float: right;
}
</style>
